<template>
	<div>
		<!-- <FormPanel
			:list="formList"
			formType="add"
			:cols="4"
			@formChange="changeHandle"
    /> -->
    <TopFilter
      :list="formList"
      :cols="4"
      @filterChange="filterChangeHandle"
    ></TopFilter>
    <br /><br />
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :onColumnsChange="columns => this.columns = columns"
    />

    <Drawer
      :visible.sync="visible2"
      title="配车确认"
      :width="1050"
      destroyOnClose
		>
		  <!--<子组件 @close="closeHandle"/>-->
		  <BuyingModal :type="handleType" :rowData="formData" @close="closeHandler" />
		</Drawer>

		<!-- <BaseDialog
      :visible.sync="visible"
      :title="dialogTitle"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <BuyingModal :type="handleType" :rowData="formData" @close="closeHandler" />
    </BaseDialog> -->


	</div>
</template>

<script>
// import { searchCarBuyingFactor } from '@/api/potenCus/basedata/carBuyingFactor';
import { dictionary } from '@/utils/dictMixin';
import BuyingModal from './buyingModal';

import { getSalesOrder, vehiclesSum } from '@/api/retail/salesmanage/confirmcar';
export default {
	name: 'confirmcar',
	mixins: [dictionary],
	components: {
	    BuyingModal
	},
	data() {
		return {
		    formList: this.createFormList(),
        columns: this.createTableColumns(),
        fetchApi: getSalesOrder,
        fetchParams: {},
		    visible: false,
		    visible2: false,
		    handleType: '',
		    dialogTitle: '',
		    formData: {},
		    conf:{ add: '新增', edit: '编辑', show: '显示' }

		}
	},
	methods: {
		createFormList() {
	      return [
	        {
	          type: 'INPUT',
	          label: '客户订单号',
	          fieldName: 'soNo',
	          placeholder: '请输入...',
	        },
          {
	          type: 'INPUT',
	          label: '销售订单号',
	          fieldName: 'viNo',
	          placeholder: '请输入...',
	        },
          {
	          type: 'INPUT',
	          label: '客户名称',
	          fieldName: 'customerName',
	          placeholder: '请输入...',
	        },
          {
	          type: 'INPUT',
	          label: 'VIN',
	          fieldName: 'vin',
	          placeholder: '请输入...',
	        },
          // {
	        //   type: 'SELECT',
	        //   label: '配车状态',
	        //   fieldName: 'dispatchedStatus',
	        //   placeholder: '请选择...',
	        //   itemList: this.createDictList('1414').filter(x => [14141001,14141002].includes(x.value))
	        // },



	      ];
	    },
      createTableColumns (){
        return [
          {
            title: '操作',
            dataIndex: 'column-action',
            width: 140,
            fixed: 'left',
            render: (props, h) => {
              return (
                <div>
                  <el-button disabled={ !props.row.vin || [14041010,14041017].includes(props.row.viStatus) ? true: false } size="mini" type="text" onClick={() => this.subHandle(props.row)}>提交</el-button>
                  <el-button disabled={ [14041010,14041017].includes(props.row.viStatus) ? true: false } size="mini" type="text" onClick={() => this.editHandle(props.row)}>配车确认</el-button>
                </div>
              );
            }
          },
          {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          {
            title: '客户订单号',
            dataIndex: 'soNo',
            sorter: true,
            filter: true,
            filterType: 'input',
            showOverflowTooltip:true,
          },
          {
            title: '销售订单号',
            dataIndex: 'viNo',
            sorter: true,
            filter: true,
            filterType: 'input',
            showOverflowTooltip:true,
          },
          {
            title: '订单状态',
            dataIndex: 'viStatus',
            sorter: true,
            filter: true,
            filterType: 'input',
            filterItems: this.createDictList('1404'),
            render: props => {
              return <span>{this.createDictText(props.row.viStatus, '1404')}</span>;
            }
          },
          {
            title: '客户名称',
            dataIndex: 'customerName',
            sorter: true,
            filter: true,
            filterType: 'input',
            showOverflowTooltip:true,
          },
          {
            title: 'VIN',
            dataIndex: 'vin',
            sorter: true,
            filter: true,
            filterType: 'input',
            width: 180,
            showOverflowTooltip:true,
          },
          {
            title: '品牌',
            dataIndex: 'brandName',
            sorter: true,
            filter: true,
            showOverflowTooltip:true,
            filterType: 'input',
          },
          {
            title: '车系',
            dataIndex: 'seriesName',
            sorter: true,
            filter: true,
            showOverflowTooltip:true,
            filterType: 'input',
          },
          {
            title: '车型',
            dataIndex: 'modelName',
            sorter: true,
            filter: true,
            width: 180,
            showOverflowTooltip:true,
            filterType: 'input',
          },
          {
            title: '配置',
            dataIndex: 'packageName',
            sorter: true,
            filter: true,
            filterType: 'input',
            width: 180,
            showOverflowTooltip:true,
          },
          {
            title: '颜色',
            dataIndex: 'colorName',
            sorter: true,
            filter: true,
            filterType: 'input',
            showOverflowTooltip:true,
          },
          {
            title: '预交车日期',
            dataIndex: 'deliveringDate',
            sorter: true,
            filter: true,
            filterType: 'input',
            showOverflowTooltip:true,
            render: props =>{
              return <span>{ this.formatDates(props.row.deliveringDate) } </span>
            }
          }


        ]
      },
	    filterChangeHandle (val){ //搜索
        this.fetchParams = Object.assign({}, val)
      },
	    openDriveCancel (){ //输入框icon点击事件
	    	console.log(111)
	    },
      subHandle (val){ //提交事件
        console.log(val)
        let para = {
          soVinId: val.soVinId,
          soNoId: val.soNoId
        }
        vehiclesSum(para).then(res => {
          console.log(res)
          this.fetchParams = { ...this.fetchParams };
        }).catch(err => {
          console.log(err)
        })
      },
      editHandle (val){ //编辑事件
        // console.log(val)
        this.visible2 = true;
        this.handleType = 'show'
        this.formData = val;
      },
      formatDates (value) { //时间过滤
        // 这里的 value 就是需要过滤的数据
        if (value == null || value == "") {
          return "";
        }
        var date = new Date(Number(value));
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        return year + "-" + month + "-" + day;
      },
	    addHandle() {
	      this.handleType = 'add';
	      this.showHandler();
	    },
	    showHandler() {
	      this.dialogTitle = `购车信息${this.conf[this.handleType]}`;
	      this.visible = true;
	    },
	    closeHandler(val, type) {
	      this.visible2 = val;
	      if (type === 'refresh') {
	        // 重新加载
	        this.fetchParams = { ...this.fetchParams };
	      }
	    }

	}
}</script>

<style scoped="scoped" lang="less">

.bottom_center{
	text-align: center;
	margin: 15px 0;
}
</style>
